<template>
	<view class="container">
		<view style="padding-top:280rpx;">
		    <image src="https://qiniu.gybsky.cn/qsbsimage/public/maintain/2023/08/25/8f4a3df9df0f47b1a1adb7b71729f84f2d3sc0kist.jpg" style="width:100%;height:340rpx;position:absolute;top:0;z-index:0"></image>
		    <view style="margin:0 24rpx;width: 94%; position: absolute;">
		        <view class="header_block">
		            <navigator class="row-center" url="/pages/bus/search_address/index?type=1&&op=dingzhi">
		                    <image src="../../../static/images/bus/start_mini.png" style="width:44rpx;height:44rpx;margin-right:9rpx;"></image>
		                    <text class="cian flex1" style="padding:35rpx 0;border-bottom:1rpx solid #E4E4E4" :style="{color:onStationName?'':'rgb(173, 173, 173)'}">{{!onStationName?'输入出发地':onStationName}}</text>
					</navigator>
		            <navigator class="row-center" url="/pages/bus/search_address/index?type=2&&op=dingzhi">
		                    <image src="../../../static/images/bus/end_mini.png" style="width:44rpx;height:44rpx;margin-right:9rpx;"></image>
		                    <text class="cian flex1" style="padding:35rpx 0;border-bottom:1rpx solid #E4E4E4;" :style="{color:offStationName?'':'rgb(173, 173, 173)'}">{{!offStationName?'输入目的地':offStationName}}</text>
					</navigator>
					
				
					<view class="row-center">
						<view class="row-center" style="justify-content:center; width:44rpx;height:44rpx;margin-right:9rpx;">
							<image src="../../../static/images/bus/call.png" style="width:20rpx;height:20rpx;"></image>
						</view>	
							<input placeholder="输入手机号" maxlength="11" type="number"   style="padding:35rpx 0;border-bottom:1rpx solid #E4E4E4;width: 100%;" placeholderClass="color-grey"  v-model="phone"></input>
						
					</view>
					
					
		           <!-- <picker @change="pickerChange"  mode="multiSelector" :range="startTimeList" :value="currentStartTimeIndexList">
		                <view class="row-center">
		                    <view class="row-center" style="justify-content:center; width:44rpx;height:44rpx;margin-right:9rpx;">
		                        <image src="../../../static/images/bus/time.png" style="width:20rpx;height:20rpx;"></image>
		                    </view>
		                    <text class="cian flex1" style="padding:35rpx 0;" :style="{color:firstSelect?'':'rgb(173, 173, 173)'}">{{firstSelect?selectStartTime:'选择上车时间'}}</text>
		                </view>
		            </picker>
					 -->
					<!-- <picker @change="pickerChange"  mode="multiSelector" :range="startTimeList" :value="currentStartTimeIndexList">
					    <view class="row-center">
					        <view class="row-center" style="justify-content:center; width:44rpx;height:44rpx;margin-right:9rpx;">
					            <image src="../../../static/images/bus/time.png" style="width:20rpx;height:20rpx;"></image>
					        </view>
					        <text class="cian flex1" style="padding:35rpx 0;" :style="{color:firstSelect?'':'rgb(173, 173, 173)'}">{{firstSelect?selectStartTime:'选择上车时间'}}</text>
					    </view>
					</picker> -->
					<view class="row-center"  style="height: 60px;">
						<view class="row-center" style="justify-content:center; width:44rpx;height:44rpx;margin-right:9rpx;">
							<image src="../../../static/images/bus/time.png" style="width:20rpx;height:20rpx;"></image>
						</view>	
						<view class="row-center bb-line"  @click="showWeek=true">
							<input v-model="weekStr" disabled placeholder="请选择星期几出行"/>
						</view>
						
						
					</view>
					<view class="row-center" style="height: 60px;">
					    <view class="row-center" style="justify-content:center; width:44rpx;height:44rpx;margin-right:9rpx;">
					        <image src="../../../static/images/bus/time.png" style="width:20rpx;height:20rpx;"></image>
					    </view>
                        <xPicker  @confirm="goConfirm" mode="hi">
							<input  v-model="selectStartTime" disabled placeholder="选择上车时间"/>
						</xPicker>
					</view>
					
				<!-- 	<view class="row-center">
						<view class="row-center" style="justify-content:center; width:44rpx;height:44rpx;margin-right:9rpx;">
							<image src="../../static/images/bus/duigou.png" style="width:20rpx;height:20rpx;"></image>
						</view>	
							<u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
					</view> -->
					 <view @click="createDz" class="set_up_line" :style="{opacity:onStationName&&offStationName&&phone&&selectStartTime&&weekStr?1:0.6}">发起定制需求</view>
		            <navigator class="row-center" style="display:inline-flex" url="/pages/web/web?url=https://bus.gybsky.cn/dizhi_rule_zunyi.html">
		                <image src="/static/images/bus/wenhao_mini.png" style="width:22rpx;height:22rpx;margin-right:6rpx;"></image>
		                <text style="color:#ED9154;font-size:26rpx;">定制规则</text>
		            </navigator>
					<navigator class="row-center" style="display:inline" url="/pages/bus/ogz_list/index">
					   <text style="float: right;color: #26a2ff;">我的定制></text>
					</navigator>
					
		        </view>
                <view style="height:50rpx;"></view>
		    </view>
		</view>
	      


    <apopup  mode="bottom" :show="showWeek" :safe-area-inset-bottom="true"  height="600" :border-radius="20" @close="showWeek=false">
    	<view class="row-center" style="padding: 15px;justify-content: space-between;
    	margin-top: 10px;">
    		<!-- <view  class=""  @click="carTypeShow = false"  style="color: #bdbdbd;">
    			取消
    		</view> -->
    		<!-- <view class="" style="color: #121212;font-size: 15px;font-weight: 700;">
    			选择车辆
    		</view> -->
    		<!-- <view  @click="carTypeShow = false" class="" style="color: #007AFF;">
    			确定
    		</view> -->
    		<view class="row-center">
    			<view class="" style="font-weight: 700;font-size: 18px;">
    				请选择星期几出行
    			</view>
    			<view class="row-center" style="margin-left: 10px;">
    				<!-- <image src="../../../static/images/bus/dunpai.png" style="width: 20px;height: 20px;" ></image> -->
    				<view style="color: #4ec6a9;font-size: 13px">
    					可多选
    				</view>
    			</view>
    		</view>
    		<view class="iconfont icon-guanbi"  @click="showWeek = false" >
    			
    		</view>
    	</view>
    	<view class="content" style="height:100%;">
    		<scroll-view scroll-y="true" v-if="carTypeList.length" style="min-height: 200px;">
    			<view style="padding-bottom: 20px;">
					<!-- <checkbox-group @change="checkboxChange"> -->
					
						<view style="height: 40px; justify-content: center;" class="row-center" v-for="(item,index) in carTypeList" :key="index">
							<view class="" :style="item.checked?'color:#007AFF':''" @click="check(index)">
								{{item.name}}
							</view>
									
							<!-- <view  style="margin-left: auto;">
								<checkbox :value="item.value" :checked="item.checked" />
							</view> -->
						</view>
					<!-- </checkbox-group> -->
					<!-- <checkbox-group @change="checkboxChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="item in carTypeList" :key="item.value">
							<view>{{item.name}}</view>
							<view>
							</view>
							
						</label>
					</checkbox-group> -->
    			</view>
    		</scroll-view>
			<view class="sub-btn" @click="confirmCarType" >
				确定选择
			</view>
    	</view>
    </apopup>
	
	</view>
</template>

<script>
	import apopup from '@/components/a-popup/index'
	
	let app = getApp();
	var _slicedToArray = function() {
	    function sliceIterator(arr, i) {
	        var _arr = [];
	        var _n = true;
	        var _d = false;
	        var _e = undefined;
	        try {
	            for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
	                _arr.push(_s.value);
	                if (i && _arr.length === i) break;
	            }
	        } catch (err) {
	            _d = true;
	            _e = err;
	        } finally {
	            try {
	                if (!_n && _i["return"]) _i["return"]();
	            } finally {
	                if (_d) throw _e;
	            }
	        }
	        return _arr;
	    }
	    return function(arr, i) {
	        if (Array.isArray(arr)) {
	            return arr;
	        } else if (Symbol.iterator in Object(arr)) {
	            return sliceIterator(arr, i);
	        } else {
	            throw new TypeError("REEOR" );
	        }
	    };
	}();
	import {mapGetters} from "vuex";
	import {toLogin} from '@/libs/login.js';
	
	import { saveBusDz } from "@/api/bus.js"
	import  xPicker  from "@/components/xPicker/index.vue"
	export default{
		components:{
			xPicker,apopup
		},
		data(){
			return {
				carTypeList: [
					{			
					  "name": "星期一",
					  "value": 1,
					  checked: false
					},
					{
					  "name": "星期二",
					  "value": 2,
					   checked: false
					},
					{
					  "name": "星期三",
					  "value": 3,
					     checked: false
					},
					{
					  "name": "星期四",
					  "value": 4,
					    checked: false
					},
					{
					  "name": "星期五",
					  "value": 5,
					   checked: false
					},
					{
					  "name": "星期六",
					  "value": 6,
					    checked: false
					},
					{
					  "name": "星期七",
					  "value": 7,
					    checked: false
					}
					
				],
				showWeek: false,
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				onStationName:'',
				offStationName:'',
				address: {
					start: {},
					end: {}
				},
				startTimeList: [],
				selectStartTime: "",
				firstSelect: false,
				currentStartTimeIndexList: [],
				weekStr: '',
				phone: '',
				message:''
				
			}
		},
		computed: mapGetters(['isLogin']),
		onShow() {
			if (!this.isLogin) {
				toLogin();
			}
		
			this.onStationName = uni.getStorageSync('start_position').name;
			this.offStationName = uni.getStorageSync('end_position').name;
		},
		onLoad(option){
		
			this.initStartTimeList();
			
		},
		methods: {
			check(index){
				this.$set(this.carTypeList[index],"checked",!this.carTypeList[index].checked)
			},
			confirmCarType(){
				var str = ''
				this.carTypeList.forEach(el =>{
					if(el.checked){
						str == '' ? (str = el.name) : (str = str + ';' + el.name )
					}
				})
				
				this.weekStr = str
				this.showWeek = false
			},
			checkboxChange(e) {
			      // 此处为点击的事件
				  console.log(111,e)
			 },
			 
			goConfirm(e){
				// var d = new Date();
				// var strdate =  d.getFullYear() + '-' + e.value
				this.selectStartTime =  e.value
				// var time = new Date(Date.parse(strdate));
				// var y = this.fmtNumber(time.getFullYear());
				// var m = this.fmtNumber(time.getMonth()+1);
				// var d = this.fmtNumber(time.getDate());
				// var h = this.fmtNumber(time.getHours());
				// var mm = this.fmtNumber(time.getMinutes());
				// var s = this.fmtNumber(time.getSeconds());
				// this.go_time_short = m + '月' + d + '日 ' +h + ':' + mm;
				// this.form.goTime = y + '-' + m + '-' +d + ' ' + h + ':' + mm;
								
					
			},
			createDz(){
				var start = uni.getStorageSync('start_position');
				var end = uni.getStorageSync('end_position');
				var that = this;
				const regex = /^1[3456789]\d{9}$/;//使用此正则即可
				
					
				if (start &&end && that.selectStartTime&&that.phone) {
					if (!regex.test(that.phone)){
						return that.$util.Tips({
							title: '请输入联系人正确手机号'
						}); 
					}
					var q = {
						start:start.name,
						end:end.name,
						startLatLng:start.lat+','+start.lng,
						endLatLng:end.lat+','+end.lng,
						time:that.selectStartTime,
						weekStr: that.weekStr,
						phone:that.phone,
						message:that.message
					}
					saveBusDz(q).then((res) => {
						that.$util.Tips({
							title:"定制成功！"
						})
						setTimeout(() =>{
						   uni.navigateTo({
							  url: "/pages/bus/ogz_list/index"
						   });					
						},1000)					
					})
				} else{
					that.$util.Tips({
						title:"请填写完整信息！"
					})
				}
			},
			pickerChange(e) {
			      console.log(e)
				  
					this.currentStartTimeIndexList = e.detail.value;
					this.firstSelect = true;
			        this.converTimeStrAndIndexList();
			    },
			  initStartTimeList: function initStartTimeList() {
					var _this5 = this;
					var hoursList = [];
					var minList = [];
					for (var i = 0; i < 24; i++) {
						hoursList.push(i > 9 ? i : "0" + i);
					}
					for (var y = 0; y < 12; y++) {
						var min = y * 5;
						minList.push(min > 9 ? min : "0" + min);
					}
					var selectStartTime = this.selectStartTime;
					this.startTimeList = [ hoursList, minList ]
				
						this.converTimeStrAndIndexList(0);
					
				},
			converTimeStrAndIndexList: function converTimeStrAndIndexList(type) {
			        var _data2 = this, currentStartTimeIndexList = _data2.currentStartTimeIndexList, startTimeList = _data2.startTimeList, selectStartTime = _data2.selectStartTime;
			        var _startTimeList = _slicedToArray(startTimeList, 2), hoursList = _startTimeList[0], minList = _startTimeList[1];
			        if (type == 0) {
			            //时间转换下标数组
			            var _selectStartTime$spli = selectStartTime.split(":"), _selectStartTime$spli2 = _slicedToArray(_selectStartTime$spli, 2), h = _selectStartTime$spli2[0], m = _selectStartTime$spli2[1];
			            console.log(hoursList.indexOf(h), minList.indexOf(m));
			            
			                this.currentStartTimeIndexList =  [ hoursList.indexOf(h), minList.indexOf(m) ]
			            
			        } else {
			            //数组转换时间
			            var _currentStartTimeInde = _slicedToArray(currentStartTimeIndexList, 2), hIndex = _currentStartTimeInde[0], mIndex = _currentStartTimeInde[1];
			           
			                this.selectStartTime = hoursList[hIndex] + ":" + minList[mIndex]
			            
			        }
			    }	
			
		},

	}
</script>

<style lang='scss' scoped>
	page{
		background: #fff;
	}
	.container{
		height: 100%;
		 display: flex;
		overflow: hidden;
		/* background: #fff; */
	}
	
	.header_block {
	    padding: 12rpx 30rpx 32rpx 30rpx;
	    background: #fff;
	    border-radius: 28rpx;
	    /* z-index: 1; */
	    position: relative;
	    box-shadow: 0px 0rpx 6rpx 2px rgba(0,0,0,0.06);
	}
	
	.set_up_line {
	    font-size: 28rpx;
	    font-weight: 400;
	    color: rgba(255,255,255,1);
	    padding: 31rpx 0;
	    border-radius:50rpx;
	    background: rgba(38, 162, 255, 1.0);
	    margin: 13rpx 0 33rpx 0;
	    text-align: center;
	}
	

	.row-center {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	}
	.color-grey{
		color: rgb(173, 173, 173)
	}
	.cian{
		line-height: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.flex1 {
	    flex: 1;
	}
	
	/* .main-box {
	  display: flex;
	  margin: 20rpx;
	  justify-content: space-between;
	  background: #f7f7f7;
	  padding: 30rpx;
	} */
	
	.bb-line {
		flex: 1;
		border-bottom: 0.5px solid #E4E4E4;
		padding: 10px 0;
	}
	.sub-btn {
		
		height: 90rpx;
		line-height: 90rpx;
		background-color: #007AFF;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		border-radius: 45rpx;
		z-index: 999999;
		margin: 0 20px 20px 20px;
	}
</style>
